<template>
	<view >
		<Navbar :showLeft="true" :leftClick="back">
			<view class="timer">
				<view class="title"> {{title}}</view>
			</view>
			<template #right>
				<view v-if="type === 1" class="iconfont icon-more-line" @click="showChapter()"></view>
			</template>
		</Navbar>
		<view class="footer">
			<uv-line-progress class="lineT" inactive-color="#fff" height="10" :show-text="false" :percentage="percentage"
				activeColor="#9060df"></uv-line-progress>
			<view class="iconfont icon-more" @click="showQuestionList">
				{{ currentIndex + 1 }}/{{ questionList.length }}
			</view>
		</view>
		<view class="question-list">
			<swiper :disable-touch="true" :current="currentIndex" class="swiper" @change="questionChange"
				:style="{ height: pageHeight + 'px' }">
				<swiper-item v-for="(item, index) in questionList">
					<ExamQuestionItem @nextPage="nextPage" :nextPage="nextPage" :showAnswer="false" :data="item"
						:index="index" v-model="questionList[index].userAnswer" :showHtml="index == currentIndex"
						:height="pageHeight">
					</ExamQuestionItem>
				</swiper-item>
			</swiper>
		</view>
		<!-- 		<Footer :objectId="currentExamQuestion.questionId + ''" :haveCollect="currentExamQuestion.haveCollect"
			:collectType="2" @updateCollect="updateCollectHandler">
			<view class="footer">
				<view class="btn-panel">
					<view class="btn" @click="back" v-else></view>
				</view>
				<template v-if="!examInfo.status">
					<view class="iconfont icon-ok">{{ 1 }}</view>
					<view class="iconfont icon-wrong">{{ 2 }}</view>
				</template>
				<view class="iconfont icon-more" @click="showQuestionList">
					{{ currentIndex + 1 }}/{{ questionList.length }}
				</view>
			</view>
		</Footer> -->
		<!--选择题目-->
		<Popup ref="questionPopupRef">
			<view class="pop-question-list">
				<view class="question-item" :style="{
            width: popItemWidth + 'px',
            height: popItemWidth + 'px',
          }" v-for="(item, index) in questionList">
					<view :class="[
              'item-inner',
              currentIndex == index ? 'active' : '',
              item.userAnswer ? 'answered' : '',
            ]" :style="{
              width: popItemWidth - 20 + 'px',
              height: popItemWidth - 20 + 'px',
              'border-radius': (popItemWidth - 20) / 2 + 'px',
            }" @click="selectQuestion(index)">{{ index + 1 }}</view>
				</view>
			</view>
		</Popup>
		<QuestionChapter :loadQuestion="getQuestionByChapterId" :loadChapter="getQuestionByCategoryId" ref="chapterRef">
		</QuestionChapter>

	</view>
</template>

<script setup>
	import ExamQuestionItem from "./PractiseQuestionItem.vue";
	import QuestionChapter from "./QuestionChapter.vue"
	import {
		LETTER,
		QUESTION_TYPE,
		LOCAL_STORAGE_KEY
	} from "@/utils/Constants.js";
	import {
		useAppInfoStore
	} from "@/stores/appInfo";
	import {
		onLoad,
		onUnload,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		getCurrentInstance,
		nextTick,
		computed,
		watch
	} from "vue";
	const {
		proxy
	} = getCurrentInstance();
	const appInfoStore = useAppInfoStore();
	const title = ref("")
	const id = ref()
	const examId = ref();
	const type = ref();
	const chapterRef = ref();
	const percentage = ref(0)
	onLoad((options) => {
		//获取路由信息
		const item = JSON.parse(decodeURIComponent(options.item))
		if (item.type == 0) {
			title.value = item.chapterName
			id.value = item.chapterId
			getQuestionByChapterId(item.chapterId);
		} else if (item.type == 1) {
			title.value = item.categoryName
			id.value = item.categoryId
			getQuestionByCategoryId(item.categoryId)
		} else {
			title.value = item.title
			getWrongQuestion();
		}
		type.value = item.type
	})
	const examInfo = ref({});
	const getWrongQuestion = async () => {
		let result = await proxy.Request({
			url: proxy.Api.getWrongQuestionList
		});
		if (result.data.length == 0) currentIndex.value = -1
		else currentIndex.value = 0
		questionList.value = result.data
	}
	const getQuestionByChapterId = async (chapterId) => {
		let result = await proxy.Request({
			url: proxy.Api.getQuestionsByChapterId,
			params: {
				id: chapterId
			},
		});
		if (result.data.length == 0) currentIndex.value = -1
		else currentIndex.value = 0
		questionList.value = result.data
	}
	const showChapter = () => {
		if (type.value == 1) chapterRef.value.show(id.value);
	};
	const getQuestionByCategoryId = async (categoryId) => {
		let result = await proxy.Request({
			url: proxy.Api.getQuestionsByCategoryId,
			params: {
				categoryId
			},
		});
		questionList.value = result.data
		currentIndex.value = 0
	}
	//计算swiper高度
	const pageHeight = computed(() => {
		const {
			statusBar,
			navBarHeight,
			screenHeight
		} = appInfoStore.getInfo();
		return screenHeight - statusBar - navBarHeight - 50;
	});


	//选择题目
	const currentExamQuestion = ref({});
	const currentIndex = ref(0);
	const questionChange = (event) => {
		const {
			current,
			source
		} = event.detail;
		currentIndex.value = current;
		currentExamQuestion.value = questionList.value[current];
	};
	const nextPage = () => {
		const length = questionList.value.length
		console.log(length)
		currentIndex.value = Math.min(length - 1, currentIndex.value + 1)
		currentExamQuestion.value = questionList.value[currentIndex.value];
	}

	const questionList = ref([])
	const formDataRef = ref();
	const rules = {
		title: [{
			required: true,
			message: "请输入内容"
		}],
	};
	watch(() => currentIndex.value, (nV, oV) => {
		percentage.value = Math.min(100, (nV) / (questionList.value.length - 1) * 100)
	})
	//显示更多
	const questionPopupRef = ref();
	const showQuestionList = () => {
		questionPopupRef.value.show();
	};

	const popItemWidth = computed(() => {
		const {
			screenWidth
		} = appInfoStore.getInfo();
		return screenWidth / 6;
	});

	const selectQuestion = (index) => {
		currentIndex.value = index;
		questionPopupRef.value.close();
	};

	const updateCollectHandler = (haveCollect) => {
		currentExamQuestion.value.haveCollect = haveCollect;
	};

	const back = () => {
		uni.navigateBack();
	};
</script>

<style lang="scss" scoped>
	.lineT {
		padding-right: 25px;
	}
	.mid {
		display: flex;

	}

	.timer {
		text-align: center;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;

		.title {
			margin-right: 5px;
		}
	}

	.question-total {
		text-align: center;

		.count {
			color: #7500fb;
			font-weight: bolder;
			font-size: 30px;
		}
	}

	.footer {
		display: flex;
		align-items: center;
		margin-top: 10px;
		margin-bottom: 10px;

		.btn-panel {
			flex: 1;
			color: #fff;
			background: #8f60df;
			text-align: center;
			border-radius: 5px;
			line-height: 40px;
			width: 120px;
			margin: 0px 10px;
		}

		.iconfont {
			color: #848484;

			&::before {
				margin-right: 3px;
				font-size: 20px;
			}
		}

		.icon-collect {
			width: 20px;
		}

		.collected {
			color: #fb2e2e;
		}

		.icon-ok {
			color: #07b107;
			width: 50px;
		}

		.icon-wrong {
			color: #fb2e2e;
			width: 50px;
		}

		.icon-more {
			display: flex;
			color: #8f60df;
			width: 70px;
			justify-content: space-evenly;
			flex-direction: row-reverse;
		}
	}

	.pop-question-list {
		max-height: calc(100vh - 200px);
		display: flex;
		flex-wrap: wrap;

		.question-item {
			padding: 10px;

			.item-inner {
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #ddd;
			}

			.active {
				color: #fff;
				background: #2caff6;
			}

			.answered {
				border: 1px solid #2caff6;
			}
		}
	}
</style>